<!-- 在线办公 -->
<template>
    <div class="community-online">
        <div class="banner"></div>
        <!--<div class="online-banner">
            <img src="../../../static/img/online/banner.jpg" alt="">
        </div>-->
        <div class="online-f">
            <div style="padding-bottom: 20px">
                <div class="cp-container">
                    <el-row class="content" :gutter="20">
                        <el-col v-for="(item , indexF) in contentF" :key="indexF" style="width: 20%" class="content-item">
                            <el-card shadow="hover">
                                <a :href="item.linkUrl" target="_blank">
                                    <span style="margin: 20px 25px 15px 20px;" :class="`icon icon-linkUrl${indexF + 1}`"></span>
                                    <span class="content-title">{{item.title}}</span>
                                </a>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="cp-container" style="padding-bottom: 20px">
                <el-row :gutter="15">
                    <el-col v-for="(c, indexC) in contentC" :key="indexC" :span="6">
                        <a :href="'http://cloud.ciip.com/app?id1=' + c.id" target="_blank">
                            <el-card shadow="hover">
                                <div class="content-C">
                                    <img :src="c.img" alt="">
                                    <p>{{c.text}}</p>
                                </div>
                            </el-card>
                        </a>
                    </el-col>
                </el-row>
            </div>
            <div class="cp-container">
                <el-row :gutter="15">
                    <el-col v-for="(t, indexT) in contentT" :key="indexT" :span="9" class="content-T">
                        <a :href="'http://cloud.ciip.com/app?id1=' + t.id" target="_blank">
                            <el-card shadow="hover" class="content-card">
                                <img :src="t.img" alt="">
                                <p>{{t.text}}</p>
                            </el-card>
                        </a>
                    </el-col>
                    <el-col :span="6" class="contentT-1">
                        <a href="http://cloud.ciip.com/app" target="_blank">
                            <el-card shadow="hover" class="cT-2">
                                <img src="../../../static/img/online/content-T3.png" alt="">
                                <p>查看更多</p>
                            </el-card>
                        </a>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import appImg1 from '../../../static/img/online/content-C1.png'
import appImg2 from '../../../static/img/online/content-C2.png'
import appImg3 from '../../../static/img/online/content-C3.png'
import appImg4 from '../../../static/img/online/content-C4.png'
import appImg5 from '../../../static/img/online/content-T1.png'
import appImg6 from '../../../static/img/online/content-T2.png'
@Component({
    layout: 'community',
    head () {
        return {
            title: '在线办公-CIIP社群中心-建筑业交流平台'
        }
    }
})
export default class PageCommunityOnline extends Vue {
    contentF: any = [
        {
            icon: '1',
            title: '学习考试',
            linkUrl: 'http://www.ibebim.com/'
        },
        {
            icon: '2',
            title: '标记查询',
            linkUrl: 'http://zpscoding.chinabim.com/#/index'
        },
        {
            icon: '3',
            title: '族库插件',
            linkUrl: 'http://mall.ciip.com/revit'
        },
        {
            icon: '4',
            title: '云盘',
            linkUrl: 'https://uc.ciip.com/disk'
        },
        {
            icon: '5',
            title: '建筑导航',
            linkUrl: 'https://hao.ciip.com/'
        }
    ]
    contentC: any = [
        {
            id: '22',
            img: appImg1,
            text: '建筑设计'
        },
        {
            id: '13',
            img: appImg2,
            text: '采购供应'
        },
        {
            id: '14',
            img: appImg3,
            text: '生产制造'
        },
        {
            id: '67',
            img: appImg4,
            text: '施工建造'
        }
    ]
    contentT: any = [
        {
            id: '64',
            img: appImg5,
            text: '运营管理'
        },
        {
            id: '15',
            img: appImg6,
            text: '办公服务'
        }
    ]
}
</script>

<style lang="scss" scoped>
    .community-online{
        /*overflow: hidden;
        .online-banner{
            position:relative;
            left:50%;
            margin-left:-960px;
            width:100%;
            display: block;
        }*/
        .banner{
            width: 100%;
            height: 420px;
            align-items: center;
            background: url("../../../static/img/online/banner.jpg") no-repeat center;
        }
        .online-f{
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f8f8f8;
            .content{
                .content-item{
                    a{
                        background-color: #FFFFFF;
                        display: block;
                        position: relative;
                        color: #333333;
                    }
                    .content-title{
                        position: absolute;
                        top: 35px;
                        font-size: 18px;
                        font-weight: 400;
                    }
                    a:hover{
                        color: #11a9e8;
                    }
                }
            }
            .content-C{
                background-color: #FFF;
                color: #333333;
                img{
                    display: block;
                    margin: 0 auto;
                    padding-top: 40px;
                    padding-bottom: 50px;
                }
                p{
                    text-align: center;
                    font-size: 20px;
                    padding-bottom: 40px;
                }
                &:hover{
                    color: #11a9e8;
                }
            }
            .content-T{
                color: #333333;
                img{
                    float: left;
                    padding: 17px 50px 15px 90px;
                }
                p{
                    float: left;
                    font-size: 20px;
                    padding-top: 60px;
                }
                .content-card:hover{
                    color: #11a9e8;
                }
            }
            .contentT-1{
                a{
                    color: #666666;
                }
                img {
                    float: left;
                    padding: 42px 32px 42px 52px;
                }
                p{
                    float: left;
                    padding-top: 60px;
                    font-size: 16px;
                }
                .cT-2:hover{
                    color: #11a9e8;
                }
            }
        }
    }
</style>
<style lang="scss">
    .community-online{
        .el-card__body{
            padding: 0;
        }
    }
</style>
